<template>
	<view class="content">
		<navbar title='考试试卷'>
		</navbar>
		<!-- <uv-navbar leftIcon="arrow-leftward" title="考试试卷" leftIconColor="#333" placeholder autoBack bgColor="#fff" :titleStyle="titleStyle"></uv-navbar> -->
		<view class="kaoione">
			<image class="icon_sj" src="@/static/new/icon_sj.png"></image>
			<text class="daojishi">倒计时：</text>
			<u-count-down :timestamp="surplus_time" format="HH:mm:ss" font-size="32" color="#1AA313" bg-color="none" separator-color="#1AA313" @end="end"></u-count-down>
			<!-- <uv-code :seconds="timestamp" ref="code" @change="codeChange"></uv-code> -->
			<!-- <u-count-down :timestamp="timestamp"></u-count-down> -->
		</view>
		<view class="kaotwo">
			<view class="danone">
				<text class="danti" v-if="topic.topic.type_name">{{topic.topic.type_name}}</text>
				<image class="icon_sc_n" src="@/static/new/icon_sc_n.png" @click="getshoucang" v-if="tiinfo.is_collect == 0"></image>
				<image class="icon_sc_n" src="@/static/new/icon_sc_s.png" @click="getshoucang" v-if="tiinfo.is_collect == 1"></image>
				<text class="tinum">{{ tiinfo.test_entry.has_number+'/'+tiinfo.test_entry.paper.topic_number }}</text>
			</view>
			<text class="tname">{{topic.topic.topic}}</text>
		</view>
		<view class="tithree">
			<!-- <view class="items active">
				<text class="xname">A.答案1</text>
				<image class="duigou" src="@/static/new/icon_gx.png"></image>
			</view> -->
			<view class="items" :class="item.isgou?'active':''" v-for="(item,index) in answer" :key="index" @click="getanswer(item)">
				<text class="xname">{{ item.option+'.'+item.answer }}</text>
				<image class="duigou" src="@/static/new/icon_gx.png"></image>
			</view>
		</view>

		<view class="botview">
			<view class="bottwoview">
				<view class="tibview tactive">题目{{ tiinfo.test_entry.has_number }}</view>
				<view class="tibview" @click="getshang">上一题</view>
				<view class="tibview" @click="getnext">下一题</view>
				<view class="tibview" @click="gettijiao(3)">交卷</view>
			</view>
		</view>

		<!-- 考试结束弹窗 -->
		<view class="yhupopview">
			<u-popup v-model="tishow" mode="center" @close="popclose(1)" width="82%" :closeable="true" z-index="1000">
				<view class="yhpop">

					<view class="pone" v-if="is_pass == 1">
						<text class="yhtit">
							恭喜通过
						</text>
						<image class="tishibg" src="/static/img/tguo.png" />
					</view>
					<view class="pone" v-if="is_pass == 0">
						<text class="yhtit">
							再接再厉
						</text>
						<image class="tishibg" src="/static/img/wtguo.png" />
					</view>
					<text class="anshou">考试成绩：{{score}}分</text>
					<!-- <text class="anshou">完成时间：89分</text> -->
					<text class="anshou">是否及格：{{ is_pass==0?'否':"是" }}</text>
					<view class="quxiaoviewtwo">
						<view class="popquview quebtn" @click="popclose(1)">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontWeight: 'bold',
					fontSize: '36rpx',
					color: '#111111',
				},
				value:'',
				timestamp:86400,
				paper_id:'',
				test_entry_id:'',
				topic_id:'',//上一题id
				tishow:false,

				topic:{
					topic:{
						type_name:'',
						topic:''
					}
				},
				tiinfo:{
					test_entry:{
						has_number:1,
						paper:{
							topic_number:1
						}
					}
				},
				answer:{},
				test_entry:{},
				option:[],
				is_pass:0,//0是不及格，1是及格
				score:0,
				surplus_time:0,
				lei:1,//1测试 2正式考试
			}
		},
		onLoad(option) {
			this.paper_id = option.paper_id
			this.lei = option.lei
			if(this.lei == 1){
				this.gettistart()
			}else if(this.lei == 2){
				this.gettistarttwo()
			}
			
		},
		onShow() {
		},
		methods: {
			async gettistart(){
				let res = await this.$u.api.tistart({
					paper_id:this.paper_id
				});
				this.test_entry_id = res.test_entry_id
				this.gettitopic();//考试详情
			},
			async gettistarttwo(){
				let res = await this.$u.api.kaostart({
					paper_id:this.paper_id
				});
				this.test_entry_id = res.test_entry_id
				this.gettitopic();//考试详情
			},
			async gettitopic(){
				let res = await this.$u.api.titopic({
					test_entry_id:this.test_entry_id,
					topic_id:this.topic_id
				});
				this.topic = res.topic
				this.tiinfo = res
				this.answer = res.answer
				this.surplus_time = Number(res.surplus_time)
				console.log(this.surplus_time)
				this.test_entry = res.test_entry
				this.topic_id = res.topic.topic.id
				// this.test_entry_id = res.test_entry_id
			},
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			async getshoucang(){
				let res = await this.$u.api.ticollect({
					topic_id:this.topic_id
				});
				this.$u.toast("操作成功");
				this.tiinfo.is_collect = this.tiinfo.is_collect==1?'0':'1'
			},
			popclose(){
				this.tishow = false
				uni.navigateBack()
			},
			async getnext(){
				//点击下一题
				// kaosubmitto
				// let res = await this.$u.api.kaosubmitto({
				// 	test_entry_id:this.test_entry_id,
				// 	topic_id:this.topic_id,
				// 	option:this.option
				// });
				this.gettijiao()
			},
			getshang(){
				//点击上一题
				if(this.tiinfo.test_entry.has_number <=1){
					this.$u.toast("没有上一题了");
				}else{
					this.topic_id = this.test_entry.last_topic_id
					this.gettitopic();//考试详情
				}
			},
			getanswer(item){
				//点击每一题
				// console.log(this.topic.topic)
				
				if(this.topic.topic.type == 0){
					//单选判断
					let answer = this.answer
					for(let i in answer){
						answer[i].isgou = false
						if(answer[i].option == item.option){
							answer[i].isgou = true
						}
					}
					this.answer = answer
					this.$forceUpdate()
				}else{
					let answer = this.answer
					for(let i in answer){
						// answer[i].isgou = false
						if(answer[i].option == item.option){
							if(answer[i].isgou){
								answer[i].isgou = false
							}else{
								answer[i].isgou = true
							}
							
						}
					}
					this.answer = answer
					this.$forceUpdate()
				}
			},
			async gettijiao(e){
				//提交试卷
				let answer = this.answer
				let option = []
				for(let i in answer){
					if(answer[i].isgou){
						option.push(answer[i].option)
					}
				}
				if(option==''&&e!=3){
					this.$u.toast("请先回答问题");
					return false;
				}
				console.log(option)
				let res = await this.$u.api.kaosubmitto({
					test_entry_id:this.test_entry_id,
					topic_id:this.topic_id,
					option:option
				});
				if(e == 2||e == 3){
					//交卷
					this.is_pass = res.is_pass
					this.score = res.score
					this.tishow = true
					// if(res.is_pass == 0){
					// 	//不及格
					// 	this.tishow = true
					// }else if(res.is_pass == 1){
					// 	//及格

					// }
				}else{
					this.topic_id = ''
					if(Number(this.tiinfo.test_entry.has_number)==Number(this.tiinfo.test_entry.paper.topic_number)){
						//提交试卷
						//交卷
						this.is_pass = res.is_pass
						this.score = res.score
						this.tishow = true
						return false;
					}
					this.gettitopic();//考试详情
				}
				
			},
			end(){
				this.gettijiao(3)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 150rpx;
		.kaoione{
			height: 80rpx;
			margin: 30rpx
			 30rpx 30rpx;
			background: #EAFFEC;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_sj{
				margin-right: 7rpx;
				height: 40rpx;
				width: 40rpx;
			}
			.daojishi{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #1AA313;
			}
			
		}
		.kaotwo{
			padding:0 30rpx;
			.danone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 24rpx;
				.danti{
					width: 120rpx;
					height: 44rpx;
					background: #EAEFFF;
					border-radius: 5rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #3E65E5;
				}
				.icon_sc_n{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
				.tinum{
					margin-left: auto;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.tname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 50rpx;
				display: block;
			}
		}
		.tione{
			margin: 30rpx;
			.img_ks{
				width: 100%;
				height: 400rpx;
			}
			.xuan{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.xuanitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 33.33%;
					justify-content: center;
					.xuanicon{
						width: 44rpx;
						height: 44rpx;
						margin-right: 7rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}
		}

		.line{
			height: 20rpx;
			background: #EEEEEE;
			width: 100%;
		}
		.titwo{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 30rpx;
			.xitem{
				background: #EEEEEE;
				border-radius: 10rpx;
				padding:15rpx 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #51565D;
				margin-right: 20rpx;
			}
			.xactive{
				background: #3E65E5;
				color: #fff;
			}
		}
		.tithree{
			margin: 0 30rpx 30rpx;
			.items{
				height: 90rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				.xname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.tiname{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					color: #999999;
					display: inline-block;
					margin-left: auto;
				}
				.duigou{
					width: 44rpx;
					height: 44rpx;
					margin-left: auto;
					display: none;
				}
			}
			.active{
				.duigou{
					display: inline-block;
				}
				background: #EAEFFF;
				.xname{
					color: #3E65E5;
				}
				.tiname{
					color: #3E65E5;
				}
			}
		}
	}
	.botview{
		position: fixed;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		bottom: 0;
		// padding: 0 60rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		justify-content: space-around;
		.bottwoview{
			display: flex;
			width: 92%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			
		}
		.tibview{
			height: 85rpx;
			border-radius: 10rpx;
			border: 1px solid #3E65E5;
			margin: 0 12rpx;
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #3E65E5;
		}
		.tactive{
			background: #3E65E5;
			color: #fff;
		}
		.kaihui{
			width: 90%;
			margin: 0 auto;
			height: 78rpx;
			background: #3E65E5;
			border-radius: 20rpx;
			display: flex;
			margin-left: auto;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}


	.yhupopview{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.yhpop{
			border-radius: 24rpx;
			padding: 40rpx 50rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
			.pone{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.yhtit{
				display: block;
				text-align: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 45rpx;
			}
			.wenxin{
				width: 100%;
				height: 280rpx;

			}
			.wenmiao{
				display: block;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin: 30rpx 0;
			}
			.tishibg{
				width: 350rpx;
				height: 300rpx;
			}
			.anshou{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin: 10rpx 0;
			}
			.pinput{
				background: #F5F5F5;
				border-radius: 10rpx;
				padding:10rpx 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.huoqu{
				margin-left: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #496EE7;
			}
			.quxiaoviewtwo{
				display: flex;
				flex-direction: row;
				margin-top: 40rpx;
				justify-content: center;
				width: 100%;
				.popquview{
					height: 90rpx;
					border-radius: 10rpx;
					border: 1rpx solid #111111;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 90%;
				}
				.quebtn{
					background: #3E65E5;
					color: #fff;
					border: 1rpx solid #3E65E5;
				}
			}
			.quxiaoviewtwo{
				display: flex;
				flex-direction: row;
				margin-top: 40rpx;
				// justify-content: space-between;
				justify-content: center;
				width: 100%;
				.popquview{
					height: 90rpx;
					border-radius: 10rpx;
					border: 1rpx solid #111111;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80%;
				}
				.quebtn{
					background: #3E65E5;
					color: #fff;
					border: 1rpx solid #3E65E5;
				}
			}
		}
	}
	.quxiaoviewtwo{
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;
			justify-content: space-between;
			width: 100%;
			.popquview{
				height: 90rpx;
				border-radius: 10rpx;
				border: 1rpx solid #111111;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
			}
			.quebtn{
				background: #3E65E5;
				color: #fff;
				border: 1rpx solid #3E65E5;
			}
		}
</style>
<style>
/deep/.uv-count-down__text{
	font-weight: 500;
	font-size: 32rpx;
	color: #1AA313;
}
</style>